<template>
  <div class="container">

    <div class="box">
      <img src="https://img95.699pic.com/xsj/1p/mw/ks.jpg%21/fh/300">
      <div class="txt">
        <span>获取Steam令牌</span>
        <span style="color:#909399;font-size: 12px">联系客服获得16位授权码</span>
      </div>
      <div class="form">
        <tiny-input type="text" placeholder="请输入账号" v-model="form.account"/>
        <tiny-input type="text" placeholder="请输入时长码" v-model="form.code"/>
        <div class="btn">
          <tiny-button @click="change" ghost type="primary">获取令牌</tiny-button>
        </div>

      </div>
      <span style="font-size: 12px;color:#909399;margin-top:20px">
         <span style="color:red"> 第一次获取后开始计时，中途不暂停，不更换，请注意使用时间。</span><br>
        请先在客户端登陆账号，再获取令牌。获取令牌后请耐心等待，切勿反复获取。<br>
        一个时长码只能与一个账号相绑定，请确保账号输入正确。<br>
        如有疑问联系客服
        </span>

    </div>

<!--    倒计时-->
    <div v-if="flag" class="count">
      {{ count }}
    </div>
<!--    获取验证码-->
    <div v-if="res&&!flag" style="font-size: 20px;color:red;margin:10px auto 0 auto;width: 80%;
    max-width: 500px;text-align: center;border: 1px red solid;">
      <div style="">
        {{ '剩余时间：' + timeDifference(time) }}
      </div>
    </div>
    <div v-if="res&&!flag" style="background-color: #ffffff;" class="count">
      {{ code }}
    </div>

  </div>
<!--  黑色遮罩-->
  <div v-if="flag" class="mask">

  </div>




          <footer style="height: 50px;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size: 12px;color: #909399;text-align: center">陕ICP备2024047031号 </footer>

</template>

<script setup lang="jsx">
import {useRouter} from "vue-router";
import {ref, onMounted, inject} from 'vue'
import {Modal} from '@opentiny/vue'
import timeDifference from "../utils/timeDifference.js";

const axios = inject("axios")
const form = ref({
  account: "",
  code: ""
})
const time = ref("")
const res = ref(false)
const code = ref("")
const count = ref(10)
const router = useRouter();
const flag = ref(false)
const startTime = () => {
  if (count.value <= 0) {
    return;
  }
  count.value--;
  setTimeout(startTime, 1040)

}
const send = () => {

  axios.post("/change", form.value).then(re => {
    if (re.data.code == 0) code.value = re.data.msg
    else code.value = re.data.data
    res.value = true
    axios.get("/account?account=" + form.value.account).then(re => {

      if (re.data.code != 0) {
        time.value = re.data.data.deadline
      }
    })
  }).catch(err => {
    res.value = true
    code.value = "网络错误"
  })
}
const change = () => {
  form.value.code = form.value.code.trim()
  form.value.account = form.value.account.trim()

  if (form.value.account.length == 0) {
    Modal.message({
      message: "请输入账号",
      status: "warning"
    })
    return
  }
  if (form.value.code.length != 16) {
    Modal.message({
      message: "请输入16位兑换码",
      status: "warning"
    })
    return
  }
  count.value = 30
  startTime()
  flag.value = true
  const modal = Modal.message({
    top: "100",
    message: (
        <img style="height:30vh;"
             src="https://image.meiye.art/Fm6xYzIICRtX84-SBW6zXWQfYrby?imageMogr2/thumbnail/470x/interlace/1" alt=""/>
    )
  })

  setTimeout(() => {
    send()
  }, 25000)
  setTimeout(() => {
    modal.vm.close()
    flag.value = false
  }, 30000)
}

</script>

<style scoped lang="less">

.container {


  .box {
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #ffffff;
    border: 1px solid transparent;
    box-sizing: border-box;
    height: auto;
    padding-bottom: 10px;


    img {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;

    }

    .form {
      width: 100%;
      display: flex;
      flex-direction: column;

      .tiny-input {
        margin-bottom: 10px;
      }
    }

    .txt {
      font-size: 17px;
      color: black;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-weight: 700;
      margin-bottom: 20px;

    }


    .btn {
      display: flex;

      justify-content: flex-end;
      width: 100%;
      margin-top: 10px;

    }
  }

  .count {
    margin: 10px auto;
    text-align: center;
    font-size: 25px;
    width: 80%;
    box-sizing: border-box;
    padding: 20px;
    max-width: 500px;
    letter-spacing: 2px;
  }
}

.mask {
  width: 100vw;
  height: 100vh;
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .3);
}

</style>